이벤트 루프
✒️ 2025-05-23 14:50 내용 수정
참고 자료 : Inpa tistory 자바스크립트 이벤트 루프 구조 동작 원리, Javascript 이벤트 루프
JavaScript에서 이벤트를 감지하여 태스크를 처리하는 관리자
- 브라우저 내부의 Call Stack, Callback Queue, Web API등의 요소를 모니터링하여 비동기 작업을 관리하고, 이를 순서대로 처리하여 프로그램의 흐름을 제어한다.
- 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식이다.
- 이벤트 기반 프로그래밍에서 프로그램의 흐름은 외부 이벤트(마우스, 키보드 동작 등)에 의해 결정되며, 이벤트 루프는 이벤트를 감지하면 콜백 함수를 실행한다.
- context : 함수가 호출될 때 생성되는 환경
| 용어 | 설명 |
|---|---|
| 이벤트 루프 | 이벤트들이 발생하면 호출할 콜백 함수들을 관리하고 호출 순서를 결정하는 역할 |
| 백그라운드 | 이벤트 리스너 등의 프로그램이 대기하는 곳. 다른 언어로 작성된 프로그램으로 봐도 무방하며, 여러 작업이 동시에 실행될 수 있음 |
| Callback queue | 비동기적 작업이 완료되면 실행되는 함수들이 대기하는 공간 Task queue + Microtask queue |
| Macrotask Queue | setTimeout, setInterval, fetch 등 비동기로 처리되는 함수들의 콜백 함수가 대기하는 공간이벤트 발생 후, 백그라운드에서 태스크 큐로 타이머나 이벤트 리스너의 콜백 함수를 보내서 정해진 순서대로 콜백들이 줄을 서서 대기함. |
| Microtask Queue | Promise, async/await 와 같이 우선적으로 비동기 처리되는 함수들의 콜백 함수가 대기하는 공간처리 우선순위가 높음 |
| Call Stack | 실행할 코드가 대기하는 공간 |
| Web APIs | 브라우저가 제공하는 비동기 API(setTimeout 등) |